<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 user-scalable=no">

        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <!-- Place favicon.ico in the root directory -->

        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/home/home.css">
        <link rel="stylesheet" href="css/appointment/appointment.css">
        <link rel="stylesheet" href="css/common.css">
        <link media="all" rel="stylesheet" href="vendor/frozenui-1.3.0/css/frozen.css">
        <!--<script src="js/vendor/modernizr-2.8.3.min.js"></script>-->
    </head>
    <body style="background-color: white;">
        <header id="id_header" class="ui-header ui-header-stable ui-border-b" style="background-color: #2bbfff;">
            <i class="ui-icon-return" onclick="history.back()"></i><h1>在线预约</h1>
        </header>
        <div id="id_body" class="ui-container ui-center" style="border: 0;">
            <div class="ui-tab" id="tab1">
                <ul class="ui-tab-nav ui-border-b">
                    <li id="prod_tab1" class="current">在线预约</li>
                </ul>
                <ul class="ui-tab-content" style="width:100%">
                    <li id="content1">
                        <div class="container">
                            <img alt="." id="pf1" class="imgClass" src="./img/privatefund/privatefund1.jpg" style="width: 100%;">
                        </div>
                        <div class="ui-flex ui-flex-pack-center">
                            <form action="#">
                                <div class="ui-form-item ui-border-b input_border" style="padding: 0;">
                                    <label style="width: 44px;">
                                      <div style="background-color: lightgray;">
                                        <img id="img_name" height="24" width="24" style="margin: 0 0 0 10px;"
                                             src="img/appointment/icon_order_user_normal@2x.png">
                                      </div>
                                    </label>
                                    <input id="input_name" class="input_area" type="text" placeholder="请输入您的姓名" style="padding-left: 60px;">
                                </div>
                                <div class="ui-form-item ui-border-b input_border" style="padding: 0;">
                                    <label style="width: 44px;">
                                      <div style="background-color: lightgray;">
                                        <img id="img_phone" height="24" width="24" style="margin: 0 0 0 10px;"
                                             src="img/appointment/icon_order_tel_normal@2x.png">
                                      </div>
                                    </label>
                                    <input id="input_phone" class="input_area" type="tel" placeholder="请输入您的联系电话" style="padding-left: 60px;">
                                </div>
                                <div class="ui-form-item ui-border-b input_border" style="padding: 0;">
                                    <label style="width: 44px;">
                                      <div style="background-color: lightgray;">
                                        <img id="img_city" height="24" width="24" style="margin: 0 0 0 10px;"
                                             src="img/appointment/icon_order_add_normal@2x.png">
                                      </div>
                                    </label>
                                    <input id="input_city" class="input_area" type="text" placeholder="请输入您的所在城市" style="padding-left: 60px;">
                                </div>

                                <div class="ui-btn-wrap">
                                    <button id="btn_submit" class="ui-btn-primary appointment_submit" style="border-radius: 60px; border: none; border-width: 0;">
                                        确认提交
                                    </button>
                                </div>
                            </form>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div id="dialog_confirm" class="ui-dialog">
            <div class="ui-dialog-cnt">
                <div class="ui-dialog-bd">
                    <h2>恭喜您，预约成功</h2>
                    <h4 style="color: gray; font-size: small;">我们的专业理财顾问会于三个工作日内与您取得联系！</h4>
                </div>
                <div class="ui-dialog-ft">
                    <button type="button" data-role="button">关闭</button>
                </div>
            </div>
        </div>
        <div id="dialog_duplicate" class="ui-dialog">
            <div class="ui-dialog-cnt">
                <div class="ui-dialog-bd">
                    <h2>抱歉，不可重复预约</h2>
                    <h2>您已预约成功</h2>
                </div>
                <div class="ui-dialog-ft">
                    <button type="button" data-role="button">关闭</button>
                </div>
            </div>
        </div>


        <!--<script src="js/vendor/jquery-1.12.0.min.js"></script>-->
        <script src="vendor/frozenui-1.3.0/lib/zepto.min.js"></script>
        <script src="vendor/frozenui-1.3.0/js/frozen.js"></script>



        <script>
            $(function(){
                $('.container').find('img').each(function(){
                    var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall';
                    $(this).addClass(imgClass);
                });
                {
                    var header_height = $("#id_header").height();
                    $('#id_body').css('margin-top', header_height + "px");
                }

            });
            $( ".input_area" ).focus(function() {
                console.log( "Handler for .focus() called." + this.placeholder );
                this.parentElement.style.borderColor = "#8bddfe";
                switch(this.id) {
                    case 'input_name':  $('#img_name').attr('src', 'img/appointment/icon_order_user_click@2x.png'); break;
                    case 'input_phone': $('#img_phone').attr('src', 'img/appointment/icon_order_tel_click@2x.png'); break;
                    case 'input_city':  $('#img_city').attr('src', 'img/appointment/icon_order_add_click@2x.png'); break;
                    default: break;
                }
                //$("#img"+this.mytag).arrt("src", "img/appointment/icon_order_user_click@2x.png");
            });
            $( ".input_area" ).blur(function() {
                console.log( "Handler for .blur() called." + this.placeholder );
                this.parentElement.style.borderColor = "lightgray";
                switch(this.id) {
                    case 'input_name':  $('#img_name').attr('src', 'img/appointment/icon_order_user_normal@2x.png'); break;
                    case 'input_phone': $('#img_phone').attr('src', 'img/appointment/icon_order_tel_normal@2x.png'); break;
                    case 'input_city':  $('#img_city').attr('src', 'img/appointment/icon_order_add_normal@2x.png'); break;
                    default: break;
                }
            });
//            $("#btn_submit").tap(function(){
//                $("#dialog_confirm").dialog("show");
//            });
            $("#btn_submit").click(function(){
                $("#dialog_confirm").dialog("show");
                $("#dialog_duplicate").dialog("show");
            })
        </script>
    </body>
</html>
